﻿<template>
  <div>
    <h3 style="text-align:center">请假条申请单</h3>
    <el-form
      ref="editForm"
      label-width="120px"
      :model="entity"
      :rules="formRule"
      size="mini"
    >

      <el-divider>请假申请</el-divider>
      <div>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="申请单号:"
            >
              <wfNo
                prefix="QJDH"
                :no.sync="entity.no"
                :active="isActiveNo('')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="申请时间:"
            >
              <wfDateTime
                :time.sync="entity.applyTime"
                :active="isActiveNode('')"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item
              label="申请人:"
            >
              <wfUserId
                :user-id.sync="entity.applyUserId"
                :active="isActiveNode('')"
              />
              <wfUserName
                :user-name.sync="entity.applyUserName"
                :active="isActiveNode('')"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="15">
            <el-form-item
              label="请假时间:"
              prop="dateTimeRange"
            >
              <el-date-picker
                v-model="entity.dateTimeRange"
                clearable
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :disabled="!isActiveNode('')"
                @change="handlChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item>
              <el-input
                v-model="entity.timeDuration"
                style="width:70px"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2">小时</el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item
              label="请假原因:"
              prop="applyReason"
            >
              <el-input
                v-model="entity.applyReason"
                type="textarea"
                :disabled="!isActiveNode('')"
                :rows="2"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <el-divider>主管审批</el-divider>
      <div>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="主管审批人:"
            >
              <wfUserId
                :user-id.sync="entity.directorUserId"
                :active="isActiveNode('主管审批')"
              />
              <wfUserName
                :user-name.sync="entity.directorUserName"
                :active="isActiveNode('主管审批')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="主管审批时间:"
            >
              <wfDateTime
                :time.sync="entity.directorTime"
                :active="isActiveNode('主管审批')"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item
              label="主管意见:"
              prop="directorSuggestion"
            >
              <el-input
                v-model="entity.directorSuggestion"
                type="textarea"
                :rows="2"
                :disabled="!isActiveNode('主管审批')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <el-divider>部门审批</el-divider>
      <div>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="部门审批人:"
            >
              <wfUserId
                :user-id.sync="entity.departmentUserId"
                :active="isActiveNode('部门审批')"
              />
              <wfUserName
                :user-name.sync="entity.departmentUserName"
                :active="isActiveNode('部门审批')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="部门审批时间:"
            >
              <wfDateTime
                :time.sync="entity.departmentTime"
                :active="isActiveNode('部门审批')"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item
              label="部门意见:"
              prop="departmentSuggestion"
            >
              <el-input
                v-model="entity.departmentSuggestion"
                type="textarea"
                :rows="2"
                :disabled="!isActiveNode('部门审批')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <el-divider>人力审批</el-divider>
      <div>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="人力审批人:"
            >
              <wfUserId
                :user-id.sync="entity.hrUserId"
                :active="isActiveNode('人力审批')"
              />
              <wfUserName
                :user-name.sync="entity.hrUserName"
                :active="isActiveNode('人力审批')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="人力审批时间:"
            >
              <wfDateTime
                :time.sync="entity.hrTime"
                :active="isActiveNode('人力审批')"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-form-item
              label="人力审批说明:"
              prop="hrSuggestion"
            >
              <el-input
                v-model="entity.hrSuggestion"
                type="textarea"
                :rows="2"
                :disabled="!isActiveNode('人力审批')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>

    </el-form>

  </div>
</template>
<script>
import WfNo from '@/components/WorkFlow/WfNo'
import wfDateTime from '@/components/WorkFlow/WfDateTime'
import wfUserName from '@/components/WorkFlow/WfUserName'
import wfUserId from '@/components/WorkFlow/WfUserId'
import moment from 'moment'

export default {
  name: 'ApplyOrVerificationLeaveReqForm',
  components: { WfNo, wfDateTime, wfUserName, wfUserId },
  props: {
    entity: {
      type: Object,
      default: () => { return { 'no': '' } }
    },
    rdn: {
      type: Number,
      default: 0
    },
    activityName: {
      type: String,
      default: null
    },
    dialogAction: {
      type: String,
      default: null
    },
    isActiveNode: {
      type: Function,
      default: () => true
    },
    isActiveNo: {
      type: Function,
      default: () => true
    }
  },
  data() {
    return {
      activeTag: 'form',
      editEntity: { no: '' },
      formRule: {
        dateTimeRange: [{ required: true, message: this.L('FieldIsRequired', undefined, '时间范围'), trigger: 'blur' }],

        applyReason: [{ required: true, message: this.L('FieldIsRequired', undefined, '申请原因'), trigger: 'blur' }]
      }
    }
  },
  watch: {
    async entity(val) {
      if (val.id) {
        for (var e in this.entity) {
          this.editEntity[e] = null
        }
      }
    }
  },
  methods: {
    // ...mapActions('noGenerate', ['generateNoAsync']),
    // isActiveNo(nodeName = '') {
    //   return this.dialogAction === 'create' && nodeName === this.activityName ? this.rdn : 0
    // },
    // isActiveNode(nodeName = '') {
    //   return nodeName === this.activityName ? this.rdn : 0
    // },
    // isActiveNode1: (() => {
    //   var rdn = Math.random()
    //   console.log(rdn)
    //   return function(nodeName) {
    //     console.log(0, nodeName, nodeName === this.activityName)
    //     // if (rdn) return rdn

    //     return nodeName === this.activityName ? rdn : 0
    //   }
    // })(),

    clearValidate() {
      this.$refs.editForm.clearValidate()
    },
    validate(cb) {
      this.$refs.editForm.validate(cb)
    },
    handlChange(d) {
      this.entity.beginTime = d && moment(d[0]).format('YYYY-MM-DD hh:mm:ss') || null
      this.entity.endTime = d && moment(d[1]).format('YYYY-MM-DD hh:mm:ss') || null

      if (d && d[0] && d[1]) {
        this.entity.timeDuration = (moment(d[1]).diff(moment(d[0]), 'minutes') / 60).toFixed(2)
      } else {
        this.entity.timeDuration = 0
      }
    }
  }
}
</script>
